
<script setup lang="ts">
import { computed } from 'vue'
import { NTabs, NCard, NForm, NFormItemRow, NInput, NTabPane, NButton } from 'naive-ui'
import {useRoute, useRouter} from 'vue-router'

const router =useRouter()
const handleLogin = () =>{
    localStorage.setItem('token','true')
    router.push('/')
}

</script>

<template>
    <div class="wrap">
        <n-card>
            <n-tabs default-value="signin" size="large">
                <n-tab-pane name="signin" tab="登录">
                    <n-form>
                        <n-form-item-row label="用户名">
                            <n-input />
                        </n-form-item-row>
                        <n-form-item-row label="密码">
                            <n-input />
                        </n-form-item-row>
                    </n-form>
                    <n-button type="primary" @click="handleLogin" block>登录</n-button>
                </n-tab-pane>
                <n-tab-pane name="signup" tab="注册">
                    <n-form>
                        <n-form-item-row label="用户名">
                            <n-input />
                        </n-form-item-row>
                        <n-form-item-row label="密码">
                            <n-input />
                        </n-form-item-row>
                        <n-form-item-row label="重复密码">
                            <n-input />
                        </n-form-item-row>
                    </n-form>
                    <n-button type="primary" block>注册</n-button>
                </n-tab-pane>
            </n-tabs>
        </n-card>
    </div>
</template>



<style scoped>
.wrap {
    width: 500px;
    text-align: left;
    margin: auto;
}
</style>